<template>
  <div>
    <div id="word-cloud" style="width:400px;height:350px;" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
export default {
  name: 'WoldCloud',
  data() {
    return {
      worddata: [
        {
          name: '鲸鱼',
          value: 10
        },
        {
          name: '小叶子',
          value: 12
        },
        {
          name: '鲸鱼吖QAQ',
          value: 20
        },
        {
          name: '施予江南',
          value: 10
        },
        {
          name: '诗予江南',
          value: 10
        },
        {
          name: '心爱的虞美人',
          value: 10
        }
      ]
    }
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('word-cloud'), 'dark')

    const option = {
    //   title: {
    //     text: '词云图'
    //   },
      backgroundColor: '#16223c',
      layoutAnimation: true,
      shape: 'circle',
      tooltip: {
        trigger: 'item',
        confine: true,
        textStyle: {
          color: '#fff'
        },
        borderColor: 'rgba(0,0,0,.8)',
        backgroundColor: 'rgba(0,0,0,1)'
      },

      series: [
        {
          type: 'wordCloud',
          // 用来调整词之间的距离
          gridSize: 25,
          // 用来调整字的大小范围
          // Text size range which the value in data will be mapped to.
          // Default to have minimum 12px and maximum 60px size.
          sizeRange: [14, 40],
          // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
          // 用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
          rotationRange: [-45, 0, 45, 90],
          // rotationRange: [ 0,90],
          // rotationRange: [0, 0],
          // 随机生成字体颜色

          // maskImage: maskImage,
          // textStyle: {
          //   color: "rgb(214,20,15)",
          // },
          textStyle: {
            color: function() {
              return (
                'rgb(' +
                  Math.round(Math.random() * 255) +
                  ', ' +
                  Math.round(Math.random() * 255) +
                  ', ' +
                  Math.round(Math.random() * 255) +
                  ')'
              )
            }
          },
          // 位置相关设置
          // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
          // Default to be put in the center and has 75% x 80% size.
          left: 'center',
          top: 'center',
          right: null,
          bottom: null,
          width: '100%',
          height: '100%',
          drawOutOfBound: true,
          // 数据
          data: this.worddata
        }
      ]
    }
    // myChart.setOption(option);
    // 加载图像，将数据放在图像中

    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style>

</style>
